<template>
    <div class="header">
        <el-tabs v-model="activeValue" type="card">
            <el-tab-pane v-for="item in showPanes" :label="item.label" :name="item.name" :key="item.key">
                <keep-alive>
                    <component :is="item.content" :activeValue="activeValue"></component>
                </keep-alive>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Standard from './asset-query/standard.vue';
import DepositQuery from './asset-query/deposit-query.vue';
import Position from './asset-query/position.vue';
import FundQuery from './asset-query/fund-query.vue';
import AssetUnit from './asset-query/asset-unit.vue';
import ValuationSel from './asset-query/valuation-sel.vue';
import LimitBalance from './asset-query/limit-balance.vue';
import { checkPermission } from '@/utils/tools';

@Component({ name: 'AssetQuery', components: { FundQuery, AssetUnit, Position, Standard, DepositQuery, ValuationSel, LimitBalance } })
export default class AssetQuery extends Vue {
    activeValue: string = 'fund-query';
    panes: any[] = [
        {
            label: '产品资产查询',
            name: 'fund-query',
            content: 'FundQuery',
            authCode: 'B_0350',
        },
        {
            label: '单元资产查询',
            name: 'asset-unit',
            content: 'AssetUnit',
            authCode: 'B_0351',
        },
        {
            label: '持仓查询',
            name: 'position',
            content: 'Position',
            authCode: 'B_0352',
        },
        // {
        //     label: '流动受限资产查询',
        //     name: 'limit-balance',
        //     content: 'LimitBalance',
        //     authCode: 'B_0353',
        // },
        {
            label: '标准券查询',
            name: 'standard',
            content: 'Standard',
            authCode: 'B_0354',
        },
        {
            label: '质押券查询',
            name: 'deposit-query',
            content: 'DepositQuery',
            authCode: 'B_0355',
        },
        // {
        //     label: '估值查询',
        //     name: 'valuation-sel',
        //     content: 'ValuationSel',
        //     authCode: 'B_0356',
        // },
    ];
    showPanes: any = [];

    mounted() {
        let showPanes = [];
        this.panes.forEach(i => {
            if (checkPermission(i.authCode)) {
                showPanes.push(i);
            }
        });
        this.showPanes = showPanes;
        this.activeValue = this.showPanes[0].name;
    }
}
</script>
<style lang="scss" scoped>
.header {
    min-width: 1200px;
    padding-top: 4px;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    border: 1px solid #e4e7ed;
    border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs .el-tabs__nav {
    border: none;
    .is-active {
        border-color: #409eff;
        border-bottom: 2px solid #409eff;
    }
}

/deep/ .el-input--mini .el-input__icon {
    line-height: 40px;
}
</style>
